@import './variables';

.app-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #eceef6;
}

.drawer-bg {
  position: absolute;
  z-index: 999;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background: $x-default-bg-color;
}

.fixed-header {
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  // width: calc(100% - $x-sidebar-width);
  width: 100%;
  height: 64px;
  transition: width 0.28s;
  // background-color: $x-default-bg-color;
  background-color: #3e4963;
  color: #fff;

  .w-40 {
    width: 40px;

    .iconfont {
      font-size: 18px;
      // color: $x-item-icon-color;
      color: #fff;

      &.icon-taiyang {
        font-size: 26px;
      }
    }
  }

  .app-breadcrumb.el-breadcrumb {
    line-height: 30px;

    .el-breadcrumb__inner {
      .no-redirect {
        // color: $x-item-text-color;
        color: #97a8be;
      }
    }
  }

  .el-breadcrumb__inner a,
  .el-breadcrumb__inner.is-link {
    font-weight: 500;
    color: #97a8be;
  }

  .el-dropdown {
    color: $x-item-text-color;
  }
}

.hide-sidebar .fixed-header {
  // width: calc(100% - 64px);
  width: 100%;
}

.sidebar-hide .fixed-header {
  width: 100%;
}

.app-maincontent {
  overflow: hidden;
  height: 100%;

  // background-color: $x-component-bg-color;
}

#app {
  .is-opened .el-menu-item {
    padding-left: 65px;
  }

  .center-container {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    margin-left: $x-sidebar-width;

    // padding: 0 10px 10px 0;
    transition: margin-left 0.28s;
    // background: $x-component-bg-color;

    // max-height: calc(100vh - 20px);
  }

  .sidebar-hide {
    margin-left: 0 !important;
  }

  .el-menu-item.is-active {
    color: $x-item-text-color-active;

    // background-color: $x-item-color-active !important;
  }

  .sidebar-container {
    font-size: 0;
    position: fixed;
    z-index: 1001;
    top: 64px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    box-sizing: border-box;
    width: $x-sidebar-width !important;
    height: calc(100% - 64px);
    transition: width 0.28s;
    // background-color: $x-default-bg-color;
    // box-shadow: 2px 0 8px #1d23290d;
    border-right: solid 1px #e6e6e6;
    .el-submenu__title {
      margin-top: 6px;
      background-color: transparent !important;
    }
    .el-menu-item,
    .el-submenu__title {
      line-height: $x-item-height;
      height: $x-item-height;
      // margin-top: 6px;
      margin-bottom: 2px;
      padding-right: 18px !important;
      // padding-left: 17px !important;
      white-space: nowrap !important;
      text-overflow: ellipsis !important;

      // background-color: transparent !important;

      .menu-name {
        color: $x-item-text-color;
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .iconfont,
      .el-submenu__icon-arrow {
        font-size: 18px;
        margin-right: 5px;
        color: $x-item-icon-color;
      }

      &:hover {
        border-radius: 10px;
        // background-color: $x-item-color-hover !important;
        background-color: #dfe7f7 !important;

        // transition: background-color .3s $x-item-bezier;
      }
    }
    .el-submenu.is-opened {
      .el-menu {
        background-color: #dfe7f7 !important;
        border-radius: 10px;
        .el-menu-item {
          transition: none;
          &.is-active {
            background-color: #4474f6 !important;
            .menu-name {
              color: #fff !important;
            }
          }
        }
        div {
          &:first-child {
            .el-menu-item {
              &.is-active {
                border-radius: 10px 10px 0 0;
              }
            }
          }
          &:last-child {
            .el-menu-item {
              &.is-active {
                border-radius: 0 0 10px 10px;
              }
            }
          }
        }
      }

      .el-submenu__title {
        // &:hover {
        border-radius: 10px;
        // background-color: $x-item-color-hover !important;
        background-color: #dfe7f7 !important;
        // }
      }
    }
    .el-menu--collapse .el-submenu {
      .el-submenu__title {
        width: 50px;
        padding: 0 10px !important;
        text-align: center;
      }
    }

    // 修复el-menu中插入div后收起文字不隐藏问题
    // /* 隐藏 > */

    .el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
      display: none;
    }

    /* 隐藏文字 */

    .el-menu--collapse .el-submenu__title span {
      display: none;
    }

    .el-menu {
      border: 0;
      background-color: transparent !important;

      .el-menu-item {
        background-color: transparent !important;

        &.is-active {
          background-color: #dfe7f7 !important;
          color: $x-item-text-color !important;
          // background-color: #4474F6 !important;
          border-radius: 0px;
          // color: #fff;
          &.submenu-title-no-dropdown{
            border-radius: 10px;
            .menu-name {
            color: $x-item-text-color-active;
            // color: #fff;
            }
          }

          .iconfont {
            color: $x-item-icon-color-active;
          }
        }
      }

      .el-submenu {
        &.is-active {
          >.el-submenu__title {
            background-color: #dfe7f7 !important;
            border-radius: 10px;

            .menu-name {
              color: $x-item-text-color-active;
            }

            .iconfont,
            .el-submenu__icon-arrow {
              color: $x-item-icon-color-active;
            }
          }
        }

        .el-menu-item {
          // padding-left: 45px !important;
        }
      }
    }

    // reset element-ui css
    // .el-menu-item,

    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    }

    .scrollbar-wrapper {
      overflow-x: hidden !important;

      // overflow: visible;
      // padding-left: 10px;
      // margin-right: 0 !important;
    }

    .el-scrollbar__view {
      margin: 0 8px;
    }

    .el-scrollbar__bar.is-vertical {
      right: 0;
    }

    .el-scrollbar {
      overflow: auto;
      height: 100%;
    }

    &.has-logo {
      .el-scrollbar {
        overflow-x: hidden;
        height: calc(100% - 90px);
        padding: 5px 0 32px;

        .el-scrollbar__bar.is-vertical {
          opacity: 0;
        }
      }
    }

    .is-horizontal {
      display: none;
    }

    a {
      display: inline-block;
      width: 100%;

      // overflow: hidden;
    }

    .svg-icon {
      width: 1.4em;
      height: 1.4em;
      margin-right: 16px;
    }
  }

  .hide-sidebar {
    .sidebar-container {
      width: 64px !important;
    }

    .center-container {
      margin-left: 65px;
    }
  }
}
